<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Running long JavaScript processes in a web browser (optimized version)</title>

  
    
    <style>

body {
  padding:0;
  margin:1em;
}

div.progressbar {
  position:relative;
  width:300px; height:20px;
  border:1px solid black;
  margin: 1em;
  overflow:hidden;
}

div.progressbar div {
  background:#316AC5;
  width:0; height:100%;
  color: #fff;
  text-indent: 10px;
}

div.out {
  background: #def;
  border: 1px solid #789;
  font: 10px Arial;
  height: 32px;
  overflow: auto;
}

    </style></head><body>
    <p>Sorting, please wait...</p>
    <div class="progressbar"><div id="progress1"></div></div>
    <div id="out1" class="out">&nbsp;</div>
    
    <div class="progressbar"><div id="progress2"></div></div>
    <div id="out2" class="out">&nbsp;</div>

    <script>

(function () {

    var i1, length1, data1, el1, next1,
        i2, length2, data2, el2, next2,
        globalStart;

    // Initialize a few things...
    length1 = 1500;
    data1 = [];
    el1 = document.getElementById("progress1");

    // Setup an array of random integers...
    for (i1 = 0; i1 < length1; i1++) {
        data1[i1] = Math.floor(Math.random() * length1);
    }
    i1 = 0;
    
    
    //
    length2 = 1500;
    data2 = [];
    el2 = document.getElementById("progress2");

    // Setup an array of random integers...
    for (i2 = 0; i2 < length2; i2++) {
        data2[i2] = Math.floor(Math.random() * length2);
    }
    i2 = 0;
    
    function sort1 () {
        var j, value, start;
        var _i = i1;
        var _data = data1;
  
        start = new Date().getTime();
        for (; _i < length1; _i++) {
  
            for (j = length1; j > _i; j--) {
                if (_data[j] < _data[j - 1]) {
                    value = _data[j];
                    _data[j] = _data[j - 1];
                    _data[j - 1] = value;
                }
            }
  
            if (new Date().getTime() - start > 50) {
                _i++;
                setTimeout(next1, 0);
                break;
            }
        }
  
        el1.style.width = (100 * _i / length1) + "%";
        if (_i >= length1) {
            el1.innerHTML = "Total duration: " + ((new Date().getTime() - globalStart) / 1000) + " seconds";
            document.getElementById('out1').innerHTML = _data+'';
            
            if (i2 < length2) {
              next2 = sort2;
              setTimeout(sort2, 0);
            }
        }
        i1 = _i;
    };

    function sort2 () {
        var j, value, start;
        var _i = i2;
        var _data = data2;
  
        start = new Date().getTime();
        for (; _i < length2; _i++) {
  
            for (j = length2; j > _i; j--) {
                if (_data[j] < _data[j - 1]) {
                    value = _data[j];
                    _data[j] = _data[j - 1];
                    _data[j - 1] = value;
                }
            }
  
            if (new Date().getTime() - start > 50) {
                _i++;
                setTimeout(next2, 0);
                break;
            }
        }
  
        el2.style.width = (100 * _i / length2) + "%";
        if (_i >= length2) {
            el2.innerHTML = "Total duration: " + ((new Date().getTime() - globalStart) / 1000) + " seconds";
            document.getElementById('out2').innerHTML = _data+'';
            
            if (i1 < length1) {
              next1 = sort1;
              setTimeout(sort1, 0);
            }
        }
        i2 = _i;
    };

    function progressFn(el, value, total) {
        el.style.width = (100 * value / total) + "%";
        if (value >= total) {
            el.innerHTML = "Total duration: " + ((new Date().getTime() - globalStart) / 1000) + " seconds";
        }
    }

    next1 = sort2;
    next2 = sort1;
    globalStart = new Date().getTime();
    sort1();
    //sort2();

})();

    </script>
  
</body></html>